<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/css/register.css}">

</head>

<body>
<div id="app">
    <div class="form" id="loginform">
        <h1>Register</h1>
        <form novalidate th:action="${REGISTER}" method="post">
            <p class="email">
                <label for="email">用户名<span>*</span>
                </label>
                <font id='tip' v-text="tip" color="red"></font>
                <input class="input" required name="username" v-model="username" type="text" @blur="checkName">
            </p>
            <p class="email">
                <label for="email">邮箱<span>*</span>
                </label>
                <input class="input" required type="email" id="email" name="email" pattern="@" @blur="sendEmail"/>
                <span class="validation error">请输入有效邮箱</span>
                <span class="validation req">必填框</span>
            </p>
            <p class="password">
                <label for="password">密码<span>*</span></label>
                <input class="input" required type="password" v-model="p1" id="password"
                       name="password"/>
                <span class="validation req">必填框</span>
            </p>
            <p class="email">
                <label for="password">确认密码<span>*</span></label>
                <font id='tip1' v-text="tip1" color="red"></font>
                <input class="input" required type="password" v-model="p2" @blur="check_password"/>
                <span class="validation req">必填框</span>
            </p>
            <p class="email">
                <label for="password">验证码<span>*</span></label>
                <input class="input" required name="verCode" type="text"/>
                <span class="validation req">必填框</span>
            </p>
            <p class="login">
                <input type="submit" value="注册"/>
            </p>
        </form>
    </div>
</div>

<!--<div id="app">-->
<!--    <form th:action="${REGISTER}" method="post">-->
<!--        用户名：<input name="username" v-model="username" type="text" @blur="checkName">-->
<!--        <font v-text="tip" color="red"></font>-->

<!--        <br>-->
<!--        密码：<input type="password"><br>-->
<!--        确认密码：<input name="password" type="password"> <br>-->
<!--        邮箱：<input name="email" type="text"><br>-->
<!--        验证码：<input name="verCode" type="text"><br>-->
<!--        <input type="submit" value="注册">-->
<!--    </form>-->
<!--</div>-->
<script th:src="@{/js/register.js}"></script>
<script th:replace="clip/script::common"></script>
<script th:replace="clip/script::layer"></script>
<script>
    Vue.createApp({
        data() {
            return {
                tip: '',
                tip2: '',
                p1: '', p2: '',
                username: '',
                email:''
            }
        },
        methods: {
            check_password() {
                var ss = this.p1.trim();
                if (ss != this.p1) {
                    this.tip1 = '密码不能带空格';
                    $('#tip1').css('visibility:visible;');
                } else if (ss != '') {
                    if (this.p1 == this.p2) {
                        this.tip1 = '';
                        $('#tip1').css('visibility:hidden;');
                    } else {
                        this.tip1 = '两次密码不相同';
                        $('#tip1').css('visibility:visible;');
                    }
                }
            },
            checkName() {
                axios.get("[[${API_PATH} + '/login/checkName']]", {
                    params: {
                        username: this.username
                    }
                }).then(r => {
                    const res = r.data;
                    if (res.code == 499) {
                        this.tip = res.remark;
                        $('#tip').css('visibility:visible;');
                    } else {
                        this.tip = '';
                        $('#tip').css('visibility:hidden;');
                    }
                });
            },
            sendEmail() {
                var email = $("#email").val();
                if(email.match(/^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/)){
                    if(this.email==email.trim())return;
                    this.email=email.trim();
                    json_api("[[@{/api/email}]]", d => {
                        if (d.code == 200){
                            layer.alert('验证码发送成功');
                        }else{
                            layer.alert('验证码发送失败');
                        }
                    },{
                        email:this.email
                    },true);
                }else{
                    layer.alert('请输入正确的邮箱');
                }
            }
        }
    }).mount('#app');
</script>
</body>

</html>